<template>
    <div>
        <el-container>
            <!--布局容器Header开始 上/ (上 中(左右) 下)-->
            <el-header style="height: 120px">
                <div style="background-color: #9f7650;height: 120px;width:100%">
                    <el-link icon="el-icon-caret-left" style="float: left;margin:50px 0 0 50px;color:white" :underline="false" href="/">返回首页</el-link>
                    <!--登陆前显示的-->
                    <div style="display: inline" v-if="unLogin">
                        <el-link icon="el-icon-user-solid" style="float: right;margin:50px 20px 0 0;color:white" :underline="false"
                                 @click="reg"
                        >用户注册
                        </el-link>
                        <el-link icon="el-icon-user" style="float: right;margin:50px 20px 0 0;color:white" :underline="false"
                                 @click="login"
                        >用户登录
                        </el-link>
                    </div>
                    <!--登陆前显示的-->

                    <!--登陆后显示的-->
                    <div style="display: inline" v-else>
                        <el-link icon="el-icon-message-solid" style="float: right;margin:50px 20px 0 0;color:white" :underline="false"
                                 @click="logout">退出登陆
                        </el-link>

                        <el-link icon="el-icon-s-custom" style="float: right;margin:50px 20px 0 0;color:white" :underline="false">
                            欢迎回来，{{user.nickname}}
                        </el-link>
                    </div>
                    <!--登陆后显示的-->
                    <!--logo-->
                    <div>
                        <img src="/imgs/logo2.png" style="width:150px;margin-top:10px">
                    </div>
                    <!--logo-->
                </div>
            </el-header>
            <!--布局容器Header结束-->

            <!--布局容器 中/ (上 中(左右) 下)-->
            <el-container style="height: 600px" v-if="!unLogin">

                <!--布局容器Aside开始-->
                <el-aside width="210px">
                    <el-card style="height: 350px">
                        <el-menu
                                router
                                :default-active="$router.currentRoute.path"
                                class="el-menu-vertical-demo"
                                 @select="handleSelect"
                                 active-text-color="#9f7650">
                            <el-menu-item index="/customer/order/add-new">
                                <template slot="title">
                                    <i class="el-icon-goods"></i>
                                    <span slot="title">酒店预定</span>
                                </template>
                            </el-menu-item>
                            <el-menu-item index="/customer/orders">
                                <i class="el-icon-tickets"></i>
                                <span slot="title">我的订单</span>
                            </el-menu-item>
                            <el-menu-item index="/customer/info" >
                                <i class="el-icon-user"></i>
                                <span slot="title">客户资料</span>
                            </el-menu-item>
                            <el-submenu index="4" >
                                <template slot="title">
                                    <i class="el-icon-document"></i>
                                    <span slot="title">修改资料</span>
                                </template>
                                <el-menu-item index="/customer/info-update" >
                                    <i class="el-icon-edit-outline"></i>
                                    <span slot="title">基本资料</span>
                                </el-menu-item>
                                <el-menu-item index="/customer/password-update" >
                                    <i class="el-icon-key"></i>
                                    <span slot="title">修改密码</span>
                                </el-menu-item>
                            </el-submenu>
                        </el-menu>
                    </el-card>
                </el-aside>
                <!--布局容器Aside结束-->

                <!--布局容器Main开始-->
                <el-main>
                    <router-view/>
                </el-main>
                <!--布局容器Main结束-->

            </el-container>
            <!--布局容器 中 结束-->

            <!--布局容器Footer开始 下/ (上 中(左右) 下)-->
            <el-footer>
                <div style="width:100%;height:120px;background-color: #403f3f;padding-top: 50px">
                    <p align="center" style="color:#dddada;">Copyright © 北京达内金桥科技有限公司版权所有 京ICP备12003709号-3 京公网安备
                        11010802029572号</p>
                    <p align="center" style="color:#dddada;">涵盖20余门课程体系，致力于打造权威的IT职业教育学习平台</p>
                    <p align="center" style="color:#dddada;">达内在线WWW.TMOOC.CN 专注于IT职业技能培训</p>

                </div>
            </el-footer>
            <!--布局容器Footer结束-->
        </el-container>

        <!-- 以下是弹出的注册用的对话框 -->
        <el-dialog title="用户注册" :visible.sync="regUserFrom">
            <el-form :model="regUser" status-icon :rules="rules" ref="regUser"
                     label-width="100px" class="demo-regUser" style="width: 400px; margin: 50px auto;">
                <el-form-item label="联系电话" prop="tel">
                    <el-input v-model="regUser.tel"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="regUser.password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="checkPass">
                    <el-input type="password" v-model="regUser.checkPass" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="用户昵称" prop="nickname">
                    <el-input type="text" v-model="regUser.nickname" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="resetForm('regUser')">重置</el-button>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="regUserFrom = false">取 消</el-button>
                <el-button type="goon" @click="regSubmitForm('regUser')">注 册</el-button>
            </div>
        </el-dialog>
        <!-- 以上是弹出的注册用的对话框 -->

        <!-- 以下是弹出的登录用的对话框 -->
        <el-dialog title="用户登录" :visible.sync="loginUserFrom">
            <el-form :model="loginUser" status-icon :rules="rules" ref="loginUser" label-width="100px" class="demo-loginUser"
                     style="width: 400px; margin: 50px auto;">
                <el-form-item label="联系电话" prop="tel">
                    <el-input v-model="loginUser.tel"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="loginUser.password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="regUserFrom = false">取 消</el-button>
                    <el-button type="goon" @click="loginSubmitForm('loginUser')">登 录</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <!-- 以上是弹出的登录用的对话框 -->

    </div>
</template>

<script>
    export default {
        data() {
            var checkPassword = (rule, value, callback) => {
                if (value !== this.regUser.password) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                unLogin:true,
                orderArr:[],
                user:{
                    userId:'',
                    nickname:'',
                    gender:'',
                    userName:'',
                    idNum:'',
                    tel:''
                },
                rules: {
                    password: [
                        {required: true, message: '请输入密码',trigger: 'blur'},
                        {min: 4, max: 15, message: '长度在 4 到 15 个字符', trigger: 'blur'}
                    ],
                    nickname: [
                        {required: true, message: '请输入昵称', trigger: 'blur'},
                        {min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur'}
                    ],
                    tel: [
                        {required: true, message: '请输入手机号码', trigger: 'blur'},
                        {min: 6, max: 100, message: '长度在 6 到 15 个字符', trigger: 'blur'}
                    ],
                    checkPass: [
                        {required: true, message: '请输入相同的密码',validator:checkPassword ,trigger: 'blur'},
                        {min: 4, max: 15, message: '长度在 4 到 15 个字符', trigger: 'blur'}
                    ],

                },
                /*注册用的部分---------------------------------------*/
                regUserFrom: false,
                regUser: {
                    nickname: '',
                    tel: '',
                    password: '',
                    checkPass: '',
                },
                /*注册用的部分---------------------------------------*/

                /*登录用的部分---------------------------------------*/
                loginUserFrom: false,
                loginUser: {
                    tel: '',
                    password: '',
                },
                /*登录用的部分---------------------------------------*/
            };
        },
        methods: {
            handleSelect(key,keyPath){

            },
            /*登陆用方法的部分---------------------*/
            login() {
                this.loginUserFrom = true;
            },
            loginSubmitForm(loginUser) {
                this.$refs[loginUser].validate((valid) => {
                    if (valid) {
                        let fromDate=this.qs.stringify(this.loginUser)
                        let url = 'http://localhost:9080/user/login'
                        console.log("登录用url=" + url);
                        this.axios.post(url,fromDate).then((response) => {
                            let responseData = response.data
                            if (responseData.state = 200) {
                                this.$message({
                                    message: '登录成功',
                                    type: 'success'
                                });
                                this.user = responseData.data;
                                localStorage.setItem('loginUser', this.user);
                                this.unLogin = false;
                                this.loginUserFrom = false;
                            } else if (responseData.state = 40400) {
                                this.$message.error(responseData.message);
                            } else {
                                this.$message.error(responseData.message);
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                })
            },
            resetForm1(formName) {
                this.$refs[formName].resetFields();
            },
            /*登陆用方法的部分---------------------*/
            /*注册用的方法部分---------------------*/
            reg() {
                this.regUserFrom = true;
            },
            regSubmitForm(regUser) {
                this.$refs[regUser].validate((valid) => {
                    if (valid) {
                        let url = 'http://localhost:9080/user/reg'
                        console.log("注册用url=" + url);
                        let user={nickname: this.regUser.nickname, tel: this.regUser.tel, password: this.regUser.password,}
                        let fromDate=this.qs.stringify(user);
                        this.axios.post(url,fromDate).then((response) => {
                            let responseData = response.data
                            if (responseData.state == 20000) {
                                this.$message({
                                    message: '恭喜你，注册成功',
                                    type: 'success'
                                });
                                localStorage.setItem('regUser', fromDate);
                                this.unLogin = false;
                                this.user = user;
                                this.regUserFrom = false;
                            } else {
                                this.$message.error(responseData.message);
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                })

            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            /*注册用的方法部分---------------------*/
            logout() {
                this.$confirm('您确定要退出登陆吗', '提示', {
                    confirmButtonText: '退出登陆',
                    cancelButtonText: '取消',
                    type: 'info'
                }).then(() => {
                    let url="http://localhost:9080/user/logout"
                    this.axios.post(url).then((response)=>{
                    });
                    this.unLogin = true;
                    this.currentUser();
                    localStorage.removeItem("regUser")
                    localStorage.removeItem("loginUser")

                }).catch(() => {

                });
            },
            href(id) {
                localStorage.removeItem("roomId")
                console.log(id);
                let roomId = id;
                localStorage.setItem("roomId", roomId);
            },
            currentUser(){
                let url="http://localhost:9080/user/currentUser";
                this.axios.get(url).then((response)=>{
                    let responseBody=response.data;
                    if(responseBody.state==20000){
                        console.log("正常显示");
                        this.unLogin=false;
                        this.user=responseBody.data;

                    }else {
                        console.log("请先登录");
                        this.login();
                    }
                });
            },
        },
        created() {
            console.log("开始执行created方法");

        },
        mounted() {
            console.log("开始执行mounted方法");
            this.currentUser();
        }
    }
</script>

<style>
    .el-button--goon.is-active,
    .el-button--goon:active {
        background: #d5a991;
        border-color: #d5a991;
        color: #fff;
    }
    .el-button--goon:focus,
    .el-button--goon:hover {
        background: #d5a991;
        border-color: #d5a991;
        color: #fff;
    }
    .el-button--goon {
        color: #FFF;
        background-color: #d5a991;
        border-color: #d5a991;
    }
</style>